<template>
  <div class="common-body-wrapper">
    <search-header
      single-width="130"
      :searchList="searchList"
      @changeHeight="toRetTable"
      @confirmSearch="toSearch"
    ></search-header>
    <multi-fun-table
      :sortColumn="notFormatColumn"
      :orderType="sortType"
      :fixed-cols="fixedCols"
      :is-reset-table="isResetTable"
      :theads-info="theadsInfo"
      :tbodys-info="tbodysInfo"
      @handleMultiCheck="handleMultiCheck"
      @handleSortColumn="handleSortColumn"
      @searchFn="getList"
      @getNextPage="getNextPage"
    >
      <!--按钮-->
      <div class="operate-btn-group" slot="operateBtnGroup">
        <a
          class="ake_btn ake_btn_text"
          v-if="isPermmited('REPORT:AKE:EXPORT')"
          @click.prevent="exportData()"
        >导出</a>
      </div>

      <!--普通列-->
      <template slot="tdCell" slot-scope="props">
        <el-table-column v-if="props.isMultiHeader" :label="props.label" align="center">
          <template v-for="(item, index) in props.children">
            <el-table-column
              v-if="item.checked"
              :key="index"
              :label="item.text"
              :min-width="item.minWidth"
              :width="item.width"
              :prop="item.prop"
              :sortable="item.sortable"
            ></el-table-column>
          </template>
        </el-table-column>

        <el-table-column
          v-else
          :fixed="props.fixed"
          :label="props.label"
          :min-width="props.minWidth"
          :width="props.width"
          :prop="props.prop"
          :sortable="props.sortable"
        >
          <template slot-scope="scope">
            <span v-if="'reno' == props.prop">{{ scope.$index + 1 }}</span>
            <span v-else-if="'couponReceivable' == props.prop">{{scope.row[props.prop]|formatMoney}}</span>
            <span v-else-if="'carrierRate' == props.prop">{{scope.row[props.prop]|formatMoney}}</span>
            <span v-else-if="'carrierFee' == props.prop">{{scope.row[props.prop]|formatMoney}}</span>
            <span v-else-if="'couponPaid' == props.prop">{{scope.row[props.prop]|formatMoney}}</span>
            <span v-else-if="'createTime' == props.prop">{{scope.row[props.prop]|mileSecondToDate}}</span>
            <span v-else-if="'modifyTime' == props.prop">{{scope.row[props.prop]|mileSecondToDate}}</span>
            <span v-else>{{ scope.row[props.prop] }}</span>
          </template>
        </el-table-column>
      </template>

      <!--操作列内的按钮-->
      <template slot="operateCell" slot-scope="props">
        <el-table-column :fixed="props.fixed" :label="props.label" min-width="110">
          <template slot-scope="scope">
            <el-button
              title="详情"
              size="small"
              type="primary"
              class="ake_btn ake_font_btn ake_btn_text"
              icon="el-icon-info"
              v-if="isPermmited('REPORT:AKE:LIST')"
              @click="toOpenOnlineSettleReportDetail(scope.row,'onlineSettleReportDetailModal')"
            ></el-button>
            <el-button
              title="确认现金收款"
              size="small"
              type="primary"
              class="ake_btn_text"
              v-if="isPermmited('REPORT:AKE:CONFIRM_SETTLE') && scope.row.auditStatus!=0 && scope.row.settleStatus==1"
              @click="confirmOnlineSettle(scope.row)"
            >确认收款</el-button>
          </template>
        </el-table-column>
      </template>
    </multi-fun-table>

    <!---->
    <table-pagination :size="total" :cur-page="pageNumber" @backData="getPagination"></table-pagination>

    <!-- 商家日报表详情 modal      -->
    <basic-modal
      ref="onlineSettleReportDetailModal"
      width="1000"
      customeClass="user-row-modal"
      static="true"
    >
      <h3 slot="title">商家日报表详情</h3>
      <div class="modal-body" slot="modal-body">
        <search-header
          tableBoxId="onlineSettleDetailModal"
          single-width="130"
          isSetSearch="false"
          :searchList="onlineSettleDetailRow.searchList"
          @confirmSearch="toSearchOnlineSettleReportDetail"
        ></search-header>

        <multi-fun-table
          tableBoxId="onlineSettleDetailModal"
          sortColumn
          orderType
          isNeedPrint="false"
          isSetTable="false"
          hasCheckboxCol="false"
          :theads-info="onlineSettleDetailRow.theadsInfo"
          :tbodys-info="onlineSettleDetailRow.tbodysInfo"
        >
          <!--普通列-->
          <template slot="tdCell" slot-scope="props">
            <el-table-column
              :fixed="props.fixed"
              :label="props.label"
              :min-width="props.minWidth"
              :width="props.width"
              :prop="props.prop"
              :sortable="props.sortable"
            >
              <template slot-scope="scope">
                <span v-if="'reno' == props.prop">{{ scope.$index + 1 }}</span>
                <span
                  v-else-if="'billStatus' == props.prop"
                >{{scope.row[props.prop]|formatBillStatus}}</span>
                <span v-else>{{ scope.row[props.prop] }}</span>
              </template>
            </el-table-column>
          </template>
        </multi-fun-table>

        <table-pagination
          :size="onlineSettleDetailRow.total"
          :cur-page="onlineSettleDetailRow.pageNumber"
          @backData="getOnlineSettletDetailPagination"
        ></table-pagination>
      </div>
      <div class="modal-footer" slot="modal-footer">
        <button
          class="ake_btn ake_btn_text ake_btn_confirm"
          @click="closed('onlineSettleReportDetailModal')"
        >关闭</button>
      </div>
    </basic-modal>
  </div>
</template>

<script>
import common from "@mixins/common.js";
import stardardList from "@mixins/tables/stardardList.js";

//modal
import invokeModal from "@mixins/modal/invokeModal.js";
// import BigPicModal from '@components/widgets/BigPicModal.vue'

// image
// import images from '@mixins/image.js'

// 引进vue的js
import OnlineSettle from "./js/OnlineSettle.js";

export default {
  mixins: [common, stardardList, invokeModal, OnlineSettle],
  data() {
    return {
      total: 0,
      fixedCols: 0,
      searchList: [
        {
          index: 0,
          isShow: false,
          type: "select",
          name: "reportType",
          text: "时间维度",
          value: "day",
          options: [{ name: "日报", value: "day" }]
        },
        {
          index: 1,
          isShow: false,
          type: "datePicker",
          pickerType: "daterange",
          name: "rangeDate",
          propName: "startDate,endDate",
          text: "时间区间",
          value: "",
          style: { width: "360px" }
        }
      ],
      theadsInfo: [
        // { index: 0, isShow: false, prop: "reno", text: "序号", width: 68 },
        {
          index: 1,
          isShow: false,
          prop: "reportDate",
          text: "日期",
          minWidth: 120
        },
        {
          index: 2,
          isShow: false,
          prop: "couponReceivable",
          text: "平台实收",
          minWidth: 120
        },
        {
          index: 3,
          isShow: false,
          prop: "carrierRate",
          text: "费率",
          minWidth: 110
        },
        {
          index: 4,
          isShow: false,
          prop: "carrierFee",
          text: "手续款",
          minWidth: 110
        },
        {
          index: 5,
          isShow: false,
          prop: "couponPaid",
          text: "应收金额",
          minWidth: 110
        },
        {
          index: 6,
          isShow: false,
          prop: "settleStatusName",
          text: "结算状态",
          minWidth: 110
        }
      ],
      tbodysInfo: []
    };
  },
  filters: {
    formatBillStatus: function(billStatus) {
      return billStatus == 2 ? "已支付" : "未支付";
    }
  }
};
</script>

<style lang="less">
.group-row-modal {
  .first-item {
    width: 240px;
  }
}
.role-select {
  width: 240px;
}
</style>